<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>校园墙</title>
    <link rel="icon" href="">
    <link rel="stylesheet" type="text/css" href="/static/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/aui-slide.css" />
    <style type="text/css">
    .hw-overlay{display:none; position: fixed; top:0;left:0;width:100%;height:100%; background-color: rgba(0,0,0,0.3);z-index:10;} 
    .hw-layer-wrap{box-sizing:border-box; width:570px; position:absolute;left:50%;top:50%; margin-left:-285px; border-radius:3px; background-color:#fff; box-shadow:1px 2px 4px 0 rgba(0,0,0,0.12); padding:45px 50px;} 
    .hwLayer-close{position:absolute; right:20px; top:20px; width:20px; height:20px; cursor:pointer; font-size:20px; color:#ccc;} 
    .hw-layer-wrap .hw-icon{color:#b4d8f3;font-size:86px;text-align:center;}
    .hw-layer-wrap h4{margin:5px 0 30px; font-size:24px; color:#383c3e;} 
    .hw-layer-wrap p{margin:30px 0; line-height:22px; color:#595d60; text-align:left;} 
     
    @media (max-width:768px){ 
        .hw-layer-wrap{width:350px; margin-left:-175px; margin-top:-200px; padding:20px 0px; text-align:center;} 
    } 
    @media (max-width:400px){ 
        .hw-layer-wrap{width:250px; margin-left:-125px;padding:20px 0px;} 
    }
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav aui-margin-b-15" id="header" style="background-color: #27AE60;padding-top:12px; ">
        <div class="aui-title">
            <div class="aui-bar aui-bar-btn aui-bar-btn-round">
                <div class="aui-bar-btn-item aui-active love1 active" tapmode="" data-item-order="0">表白墙</div>
                <div  class="aui-bar-btn-item love2" tapmode="" data-item-order="1" >吐槽墙</div>
            </div>
        </div>
        <a class="btn aui-btn aui-pull-right show-layer" data-show-layer="hw-layer" role="button">
            <span class="aui-iconfont aui-icon-plus"></span>
        </a>
    </header>

    <!-- 表白墙 -->
    <section class="aui-content" id="lovewall" >

        <div class="aui-timeline">
        <div class="aui-timeline-item-header"><!-- {{loves.time|date:"Y-m-d H:i" }} --></div>
        {% for love in loves %}
            {% if love.images %}
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label aui-bg-info text-light">{{love.fromsb}}</div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-header aui-border-b">
                            <div>To {{love.tosb}}</div>
                            <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                        </div>
                        <div class="aui-card-list-content-padded">
                            {{love.content}}
                            <img src="/static/{{love.images}}">
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label aui-bg-info text-light">{{love.fromsb}}</div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-header aui-border-b">
                            <div>To {{love.tosb}}</div>
                            <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                        </div>
                        <div class="aui-card-list-content-padded">
                            {{love.content}}
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        </div>
    </section>

    <!-- 吐槽墙 -->
    <section class="aui-content" id="Teasingwall" >

        <div class="aui-timeline">
        <div class="aui-timeline-item-header">{{teasing.time|date:"Y-m-d H:i" }}</div>
        {% for teasing in teasings %}
            {% if teasing.images %}
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label aui-bg-info text-light">{{teasing.fromsb}}</div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-header aui-border-b">
                            <div>To {{teasing.tosb}}</div>
                            <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                        </div>
                        <div class="aui-card-list-content-padded">
                            {{teasing.content}}
                            <img src="/static/{{teasing.images}}">
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label aui-bg-info text-light">{{teasing.fromsb}}</div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-header aui-border-b">
                            <div>To {{teasing.tosb}}</div>
                            <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                        </div>
                        <div class="aui-card-list-content-padded">
                            {{teasing.content}}
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        </div>
       

        <!-- <div class="aui-timeline">
            <div class="aui-timeline-item-header">2017年1月8日</div>
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label aui-bg-info text-light">twodog</div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-header aui-border-b">
                            <div>To sb</div>
                            <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                        </div>
                        <div class="aui-card-list-content-padded">
                            吐槽墙
                            <img src="/static/image/l1.png">
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label-icon aui-bg-danger">
                    <i class="aui-iconfont aui-icon-like text-light"></i>
                </div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-content-padded">
                           吐槽墙吐槽墙一直在努力。感谢一路有大家的陪伴！！！????????????
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-timeline-item-header">2016年2月8日</div>
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label-icon aui-bg-danger">
                    <i class="aui-iconfont aui-icon-like text-light"></i>
                </div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-content-padded">
                            一直在努力。感谢一路有大家的陪伴！！！????????????
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-timeline-item">
                <div class="aui-timeline-item-label-icon aui-bg-danger">
                    <i class="aui-iconfont aui-icon-like text-light"></i>
                </div>
                <div class="aui-timeline-item-inner">
                    <div class="aui-card-list">
                        <div class="aui-card-list-content-padded">
                            一直在努力。感谢一路有大家的陪伴！！！????????????
                        </div>
                        <div class="aui-card-list-footer aui-border-t aui-font-size-12">
                            <div><i class="aui-iconfont aui-icon-note aui-font-size-14"></i> 666</div>
                            <div><i class="aui-iconfont aui-icon-laud aui-font-size-14"></i> 888</div>
                            <div><i class="aui-iconfont aui-icon-star aui-font-size-14"></i> 888</div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

    </section>

    <footer class="aui-bar aui-bar-tab" id="footer" style="background-color: #27AE60">
        <div class="aui-bar-tab-item" tapmode>
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-bar-tab-label"><a href="{% url 'mycampus:index' %}" style="color: #000">首页</a></div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <i class="aui-iconfont aui-icon-calendar"></i>
            <div class="aui-bar-tab-label"><a href="{% url 'mycampus:learn' %}" style="color: #000">学习</a></div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <i class="aui-iconfont aui-icon-plus"></i>
            <div class="aui-bar-tab-label"><a href="{% url 'mycampus:published' %}" style="color: #000">发表</a></div>
        </div>
        <div class="aui-bar-tab-item aui-active" tapmode>
            <i class="aui-iconfont aui-icon-like"></i>
            <div class="aui-bar-tab-label"><a href="{% url 'mycampus:love' %}" style="color: #000;">love</a></div>
        </div>
        <div class="aui-bar-tab-item" tapmode> 
            <div class="aui-dot"></div>
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-bar-tab-label"><a href="{% url 'mycampus:user' %}" style="color: #000">我的</a></div>
        </div>
    </footer>

    <!-- 发表弹出框 -->
    <div class="hw-overlay" id="hw-layer"> 
        <div class="hw-layer-wrap"> 
            <div class="aui-card-list">
                <form role="form" id="form1"  method="post" enctype="multipart/form-data" onsubmit="return check()">
                    {% csrf_token %}
                    <div class="aui-card-list-header">
                            
                            
                        <input type="file" name="image" onchange="imgPreview(this)" />
                    </div>
                    
                    <div class="aui-card-list-content-padded">
                        <img id="preview" /><br/>
                        <textarea id="tosb" placeholder="写给..." name="tosb"></textarea>
                        <!-- </span><span id="erroretitle" style="display:none;color:red;">标题不能为空！</span> -->
                        <textarea id="title" placeholder="想说的话..." name="content" onblur="return cheack_title2()"></textarea>
                        </span><span id="erroretitle" style="display:none;color:red;">内容不能为空！</span>
                        <textarea id="fromsb" placeholder="from..." name="fromsb"></textarea>
                        <li class="aui-list-item aui-pull-left ">
                            <div class="aui-list-item-inner">
                                <label><input onclick="optlovewall()" class="aui-radio" type="radio" name="radio2" checked>表白墙</label>
                                <label><input  onclick="optteasingwall()" class="aui-radio" type="radio" name="radio2" >吐槽墙</label>
                            </div>
                        </li>
                    
                    <div class="aui-card-list-footer aui-pull-right">
                        <button onclick="result()" type="submit" type="button" class="aui-btn aui-btn-info  hwLayer-ok" >发表</button>
                        <!-- <button class="btn btn-success hwLayer-ok">确 定</button>  -->
                        <!-- <button class="aui-btn aui-btn-primary hwLayer-cancel">取 消</button>  -->
                    </div>
                </from>
            </div> 
        </div> 
    </div> 

    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/api.js"></script>
    <script type="text/javascript" src="/static/js/aui-tab.js"></script>
    <script type="text/javascript" src="/static/js/newcommon.js"></script> 
    <script type="text/javascript">
        apiready = function(){
                if(api.systemType == 'ios'){
                    scaleEnabled = true;
                    // document.getElementById('header').style.paddingTop = '10px';
                }
                //支持沉浸式效果
                if (!api.statusBarAppearance) {
                   document.getElementById('header').style.paddingTop = '0px';
                }
            };
        function cheack_title2(){
            var title = document.getElementById('title').value;
            if (title == '' || title==undefined ||title==null|| content == ''||content==undefined||content==null) {
            document.getElementById('erroretitle').style.display = "block";
            return false;
            }
            else{
                document.getElementById('erroretitle').style.display = "none";
            }
        }
        function check(){
            if(!cheack_title2()){
                return false;
            }
            else{
                return false;
            }
        }
    </script>
    <script type="text/javascript">
        apiready = function(){
            api.parseTapmode();
        }
        var bar = document.querySelectorAll(".aui-bar-btn");
        if(bar){
            for(var i=0; i<bar.length;i++){
                var d = bar[i];
                var tab = new auiTab({
                    element:bar[i],
                    repeatClick:true
                },function(ret){
                    if(ret.dom.parentNode.getAttribute("type") && ret.dom.parentNode.getAttribute("type")=="count"){
                        var count = parseInt(document.getElementById("count").value);
                        if(ret.index==2)return;
                        if(ret.index==1){
                            document.getElementById("count").value = count-1;
                        }
                        if(ret.index==3){
                            document.getElementById("count").value = count+1;
                        }
                    }
                });

            }
        }
    </script>
    <script type="text/javascript">  
            var opt=0;
            function optlovewall(){
                opt=0;
           }
           function optteasingwall(){
                opt=1;
           }
           function result(){
                if(opt==0){
                    document.getElementById("form1").action="{% url 'mycampus:send_love' %}"
                }
                else{
                    document.getElementById("form1").action="{% url 'mycampus:send_teasing' %}"
                }
           }
    </script>
</body>
</html>